<script setup lang="ts">
	// * 热销商品统计图表组件
	import * as echarts from 'echarts'
	import { ref, onMounted, reactive, onUnmounted, computed, watch } from 'vue'
	import { hotApi } from '@api/data'
	import { getThemeValue } from '@/utils/theme_utils'
	import { useTheme } from '@/components/hooks/useTheme'
	const { theme } = useTheme()

	// 容器实例
	const fullRef = ref<HTMLDivElement>()
	// 图表状态数据
	const state = reactive({
		chartsData: [],
		index: 0,
		size: 0
	})

	// 监听主题的切换 调用初始化
	watch(theme, () => {
		// 图表销毁
		myEcharts.dispose()
		initCharts()
		getData()
		screenAdapter()
	})

	const selectStyle = computed(() => ({
		color: getThemeValue(theme.value).titleColor,
		fontSize: state.size + 'px'
	}))

	// echarts实例
	let myEcharts: echarts.ECharts = null

	const cate_title = computed(() => state.chartsData[state.index]?.name)

	// * 初始化图表
	const initCharts = () => {
		// 初始化
		myEcharts = echarts.init(fullRef.value, theme.value)
		// 配置
		const option: echarts.EChartsOption = {
			title: { text: '| 热销商品占比', top: 20, left: 20 },
			legend: { icon: 'circle', top: '15%' },
			tooltip: {
				trigger: 'item',
				formatter: arg =>
					arg.data.children.map(item => `${item.name}: ${Math.round((item.value / arg.value) * 100)}%`).join('<br/>')
			},
			series: [
				{
					type: 'pie',
					center: ['50%', '60%'],
					label: { show: false },
					labelLine: { show: false },
					// 高亮显示 label
					emphasis: { label: { show: true } }
				}
			]
		}
		// 设置配置
		myEcharts.setOption(option)
	}

	// * 获取数据
	const getData = async () => {
		const { data } = await hotApi()
		state.chartsData = data
		// 更新配置
		updateCharts()
	}

	// * 更新配置项
	const updateCharts = () => {
		// 处理数据
		const values = state.chartsData[state.index].children.map(item => ({
			name: item.name,
			value: item.value,
			children: item.children
		}))
		// 配置项
		const updateOption: echarts.EChartsOption = {
			series: [{ data: values }]
		}
		// 设置配置项
		myEcharts.setOption(updateOption)
	}

	// * 分辨率适配 stock
	const screenAdapter = () => {
		state.size = (fullRef.value.offsetWidth / 100) * 3.25
		// 设置配置
		const adapterOption: echarts.EChartsOption = {
			title: { textStyle: { fontSize: state.size } },
			series: [{ radius: state.size * 5 }],
			legend: {
				itemWidth: state.size * 0.6,
				itemHeight: state.size * 0.6,
				itemGap: state.size * 0.6,
				textStyle: { fontSize: state.size * 0.6 }
			}
		}
		// 更新配置
		myEcharts.setOption(adapterOption)
		myEcharts.resize()
	}

	// 实例挂载后（渲染后）
	onMounted(() => {
		initCharts()
		getData()
		window.addEventListener('resize', screenAdapter)
		screenAdapter()
	})

	const toLeft = () => {
		state.index--
		if (state.index < 0) state.index = state.chartsData.length - 1
		updateCharts()
	}
	const toRight = () => {
		state.index++
		if (state.index > state.chartsData.length - 1) state.index = 0
		updateCharts()
	}

	// 实例销毁后
	onUnmounted(() => {
		window.removeEventListener('resize', screenAdapter)
	})

	defineExpose({ resize: screenAdapter })
</script>

<template>
	<div class="page_container">
		<span class="iconfont icon-arrow-lift" @click="toLeft" :style="selectStyle"></span>
		<span class="iconfont icon-arrow-right" @click="toRight" :style="selectStyle"></span>
		<span class="cate_title" :style="selectStyle">{{ cate_title }}</span>
		<div class="full_container" ref="fullRef"></div>
	</div>
</template>

<style scoped lang="scss">
	.iconfont {
		position: absolute;
		z-index: 99;
		color: #fff;
		top: 50%;
		transform: rotate(0);
		font-size: 30px;
		cursor: pointer;
		&.icon-arrow-lift {
			left: 10%;
		}
		&.icon-arrow-right {
			right: 10%;
		}
	}
	.cate_title {
		position: absolute;
		color: #fff;
		font-size: 30px;
		font-weight: bold;
		right: 10%;
		bottom: 3%;
		z-index: 99;
	}
</style>
